<template>
  <!-- 白名单 -->
  <div class="app-container">
    <div class="app-wrap">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="IP白名单" name="first">
          <search-table ref="table" :table-loading="listLoading" :table-data="dataList" @query="getDataList(true)" @reset="refresh">
            <template v-slot:row> </template>
            <template v-slot:actions>
              <el-button type="primary" v-permission="'whitelistIP.add'" size="mini" icon="el-icon-plus" @click="(isShowDetails = true), (checkedItem = null)">新增</el-button>
              <el-button type="info" v-permission="'refresh'" size="mini" icon="el-icon-refresh" @click="getDataList">刷新</el-button>
            </template>
            <template>
              <el-table-column align="center" type="index" width="50">
                <template slot-scope="scope">
                  <el-radio v-model="scope.row.isChecked" :label="true" @change="handleCurrentChange(scope.row)">{{""}}</el-radio>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="id" label="ID" width="80" />
              <el-table-column align="center" prop="operated_id" label="运营商ID" width="120" />
              <el-table-column align="center" prop="is_central" label="平台" width="120">
                <template slot-scope="scope">
                  {{ gameIdMap[scope.row.is_central] }}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="real_ip" label="IP" />
              <el-table-column align="center" prop="status" label="IP状态" width="200">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.status?'success':'info'">{{ scope.row.status?'开启':'关闭' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="left" prop="operation" label="操作" width="300">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" v-permission="'whitelistIP.edit'" content="编辑" placement="top-start">
                    <el-button size="mini" type="warning" @click.stop="editItem(scope.row)"><i class="el-icon-edit-outline" /></el-button>
                  </el-tooltip>
                  <el-tooltip effect="dark" v-permission="'whitelistIP.delete'" content="删除" placement="top-start">
                    <el-button size="mini" type="danger" @click.stop="deleteItem(scope.row)"><i class="el-icon-delete" /></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </template>
            <template v-slot:footer>
              <pagination  :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getDataList" />
            </template>
          </search-table>
        </el-tab-pane>
        <el-tab-pane label="账号白名单" name="second">
          <search-table ref="table" :table-loading="listLoading" :table-data="dataList" @query="getWhitelistAccountList(true)" @reset="refresh">
            <template v-slot:row> </template>
            <template v-slot:actions>
              <el-button type="primary" v-permission="'whitelistAccount.add'" size="mini" icon="el-icon-plus" @click="(isShowDetails = true), (checkedItem = null)">新增</el-button>
            </template>
            <template>
              <el-table-column align="center" type="index" width="50">
                <template slot-scope="scope">
                  <el-radio v-model="scope.row.isChecked" :label="true" @change="handleCurrentChange(scope.row)">{{
                    ""
                  }}</el-radio>
                </template>
              </el-table-column>
              <!-- <el-table-column align="center" prop="id" label="ID" width="80" /> -->
              <el-table-column align="center" prop="operated_id" label="运营商ID" width="120" />
              <el-table-column align="center" prop="is_central" label="平台" width="120">
                <template slot-scope="scope">
                  {{ gameIdMap[scope.row.is_central] }}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="nick_name" label="昵称" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ $public.accountLabel(scope.row.admin_id) }}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column align="center" prop="user_name" label="账号">
                <template slot-scope="scope">
                  <span v-if="scope.row.admin_data">{{
                    scope.row.admin_data.user_name
                  }}</span>
                </template>
              </el-table-column> -->
              <el-table-column align="left" prop="operation" label="操作" width="300">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" v-permission="'whitelistAccount.edit'" content="编辑" placement="top-start">
                    <el-button size="mini" type="warning" @click.stop="editItem(scope.row)"><i class="el-icon-edit-outline" /></el-button>
                  </el-tooltip>
                  <el-tooltip effect="dark" v-permission="'whitelistAccount.delete'" content="删除" placement="top-start">
                    <el-button size="mini" type="danger" @click.stop="deleteItem(scope.row)"><i class="el-icon-delete" /></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </template>
            <template v-slot:footer>
              <pagination  :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getDataList" />
            </template>
          </search-table>
        </el-tab-pane>
      </el-tabs>
      <page-details :show="isShowDetails" @onHideDetails="onHideDetails" :data="checkedItem" :activeType="activeType"></page-details>
    </div>
  </div>
</template>

<script>
import { throttle } from '@/utils/index'
import {
  whitelistIpList,
  delWhitelistIp,
  whitelistAccountList,
  delWhitelistAccount
} from '@/api/whitelist'
import PageDetails from './page-details.vue'
import SearchTable from '@/components/SearchTable'
export default {
  name: 'whitelist',
  components: {
    PageDetails,
    SearchTable
  },
  data () {
    return {
      dataList: [],
      activeName: 'first',
      activeType: false,
      checkedItem: null,
      listLoading: false,
      isShowDetails: false,
      currentTotal: 0,
      listQuery: {
        page: 1,
        size: 50,
      },
      gameIdMap: {
        1: "中控",
        0: "阿波罗",
      }
    }
  },
  created () {
    // this.getDataList()
  },
  activated () {
    this.getDataList()
  },
  methods: {
    // 获取IP白名单
    async getDataList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.dataList = [];
      that.checkedItem = null;
      that.listLoading = true;
      const response = await whitelistIpList(params)
      if (response.code==1) {
        if (response.data.list) {
          response.data.list.forEach(item => {
            item.isChecked = false
          })
          that.currentTotal = response.data.total
          that.dataList = response.data.list
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 获取账号白名单
    async getWhitelistAccountList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.dataList = [];
      that.checkedItem = null;
      that.listLoading = true;
      const response = await whitelistAccountList(params)
      if (response.code==1) {
        if (response.data.list) {
          response.data.list.forEach(item => {
            item.isChecked = false
          })
          that.currentTotal = response.data.total
          that.dataList = response.data.list
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 切换白名单类型
    handleClick (item) {
      let that = this;
      if (item.name == 'first') {
        that.activeType = false
        that.getDataList(true)
      } else {
        that.activeType = true
        that.getWhitelistAccountList(true)
      }
      that.activeName = item.name
      that.$nextTick(() => {
        that.$refs.table.$refs.tableRef.doLayout()
      })
    },
    // 编辑/查看
    editItem (row) {
      let that = this;
      that.isShowDetails = true;
      that.checkedItem = row;
      that.handleCurrentChange(row)
    },
    // 删除
    deleteItem (row) {
      let that = this;
      that.handleCurrentChange(row)
      if (that.activeName == 'first') {
        that.$confirm(`是否删除【${row.real_ip} IP?`, '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          delWhitelistIp({
            id: row.id,
            status: 1
          }).then(function (res) {
            that.getDataList(true)
            that.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
        }).catch(() => { });
      } else {
        that.$confirm(`是否删除【${row.admin_data.nick_name} 账户?`, '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          delWhitelistAccount({
            id: row.id,
            status: 1
          }).then(function (res) {
            that.getWhitelistAccountList(true)
            that.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
        }).catch(() => { });
      }
    },
    // 选择表格数据
    handleCurrentChange (val) {
      this.checkedItem = val;
      this.dataList.map(item => {
        if (item.id === val.id) {
          item.isChecked = true
        } else {
          item.isChecked = false
        }
      })
    },
    // 隐藏详情
    onHideDetails (show) {
      this.isShowDetails = false
      if (show) {
        if (this.activeName == 'first') {
          this.getDataList()
        } else {
          this.getWhitelistAccountList()
        }
      }
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
      }
      this.getDataList();
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs {
  height: 100%;
}
::v-deep .el-tabs__content {
  height: calc(100% - 56px);
}

::v-deep .el-tab-pane {
  height: 100%;
}
</style>
